<script setup lang="ts">
import { ObjectMeta, Pod } from "@/views/domain/kubeHud/api/k8s/types";
import KDescGroup from "@/views/domain/kubeHud/views/k8s/components/KDescGroup.vue";
import KDescRow from "@/views/domain/kubeHud/views/k8s/components/KDescRow.vue";
import {
  IconTemplate,
  IconYaml
} from "@/views/domain/kubeHud/views/k8s/components/icons";
import KSpace from "../../components/KSpace.vue";
import { timeTrans } from "@/views/domain/kubeHud/utils";
import { computed } from "vue";
import YamlDialog from "../../components/YamlDialog.vue";

type Prop = {
  pod?: Pod;
};

const props = defineProps<Prop>();

const metadata = computed(() => props.pod?.metadata);
</script>

<template>
  <div class="pod-simple">
    <KDescGroup :border="false">
      <template #title>
        <KSpace direction="column" gap="5px">
          <el-button
            type="default"
            icon="ArrowLeft"
            plain
            round
            size="small"
            @click="$router.back()"
          >
            容器组
          </el-button>
          <el-space class="ml-2">
            <el-icon size="24"><IconTemplate /></el-icon>
            <span>{{ metadata?.name }}</span>
          </el-space>
        </KSpace>
      </template>
      <div class="simple-toolbar">
        <YamlDialog
          :value="pod"
          btn-text="查看YAML"
          plain
          round
          size="small"
          :title="'Pod:' + metadata?.name"
        />
        <el-button size="small" round plain type="danger">删除</el-button>
      </div>
      <KDescRow
        title-class="desc-title"
        content-class="desc-content"
        label="集群"
        :content="metadata?.name"
      />
      <KDescRow
        title-class="desc-title"
        content-class="desc-content"
        label="名称"
        :content="metadata?.name"
      />
      <KDescRow
        title-class="desc-title"
        content-class="desc-content"
        label="命名空间"
        :content="metadata?.namespace"
      />
      <KDescRow
        title-class="desc-title"
        content-class="desc-content"
        label="创建时间"
        :content="timeTrans(metadata?.creationTimestamp, 'YYYY-MM-DD HH:mm:ss')"
      />
    </KDescGroup>
  </div>
</template>
<style lang="scss">
.pod-simple {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 5px;
  background-color: var(--k8s-widget-bg-color);
  color: var(--k8s-widget-text-color);
}

.simple-toolbar {
  width: 100%;
  display: flex;
  padding: 10px 0;
  gap: 10px;
  align-items: center;
}

.desc-title {
  font-size: 12px;
  color: var(--el-color-info);
  width: 30%;
}
.desc-content {
  width: 70%;
  font-size: 12px;
}
</style>
